<template>
  <view class="container">
    <!-- <navbar bg-color="#E72A2A" title="商城" color="#ffffff">
      <view class="left-icon" slot="leftIcon" style="position: absolute">
        <view class="logo"> LOGO </view>
      </view>
    </navbar> -->
    <!-- <view class="header">
      <headerSearch class="search-box" bgColor="#ffffff" @searchClick="searchClick">
        <view class="left" slot="left" @click.stop="citySelect">
          <text>{{ city.name }}</text>
          <image :src="$img_path('/course/select.png')" mode="widthFix"></image>
        </view>
      </headerSearch>
      <view class="msg">
        <image :src="$img_path('/course/index/1.png')" mode="widthFix"></image>
      </view>
    </view> -->

    <view class="content">
      <!-- <view class="top">
        <view class="t-text"> 您需要什么服务? </view>
        <view class="service">
          <view class="item" @click="toModel('/pages/index/index', 1)">
            <image :src="$img_path('/course/index/2.png')" mode="widthFix"></image>
          </view>
          <view class="item item-M-style">
            <image :src="$img_path('/course/index/3.png')" mode="widthFix"></image>
          </view>
          <view class="item" @click="toModel('/pagesCourse/index/index', 2)">
            <image :src="$img_path('/course/index/4.png')" mode="widthFix"></image>
          </view>
        </view>
      </view> -->
      <!-- 8 - 导航 -->
      <view class="bg-box box-1" style="padding-bottom: 20rpx" v-if="nav_8.length > 0">
        <view class="bg-con-box">
          <view class="item" v-for="(item, i) in nav_8" :key="item.id" @click="toList(item)">
            <image :src="$img_base_url(item.thumb_image)" mode="widthFix"></image>
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!-- 10 - 导航 -->
      <view class="bg-box box-1" v-if="nav_10.length > 0">
        <view class="bg-con-box" style="width: calc(100% + 42rpx)">
          <view
            class="item"
            v-for="(item, i) in nav_10"
            :key="item.id"
            @click="toList(item)"
            style="width: 104rpx; margin-right: 38rpx; margin-bottom: 20rpx"
          >
            <image style="width: 80rpx" :src="$img_base_url(item.thumb_image)" mode="widthFix"></image>
            <text style="font-size: 26rpx">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <view class="Notice">
        <image :src="$img_path('/course/index/16.png')" mode="widthFix"></image>
        <view class="text"> 服务电话：12345678910 </view>
      </view>

      <!-- 优惠券 -->
      <view class="bg-box box-3">
        <image class="bg-img" :src="$img_path('/course/index/bg2.png')" mode="widthFix"></image>
        <view class="title">
          <view class="left">
            <image :src="$img_path('/course/index/15.png')" mode="widthFix"></image>
            <text>优惠券</text>
          </view>
          <view class="right" @click="toUrl('/pagesMall/coupon_list/coupon_list')">
            <text>更多</text>
            <image :src="$img_path('/course/index/icon_r.png')" mode="widthFix"></image>
          </view>
        </view>

        <view class="coupon">
          <view class="c-box">
            <view class="item" v-for="(item, i) in CouponList" :key="item.id">
              <!-- <image :src="$img_path('/course/index/c.png')" mode="widthFix"></image> -->
              <view class="zk-box">
                <view class="title"> 优惠券 </view>
                <view class="val">
                  <text>{{ item.type == "reduction" ? Number(item.price) : item.discount }}</text
                  >{{ item.type == "reduction" ? "元" : "折" }}
                </view>
              </view>

              <view class="xz">
                <!-- {{item.type=='reduction'?`满${Number(item.limit)}元立减`:'最高减'}} -->
                {{ `满${Number(item.limit)}元立减` }}
              </view>
            </view>
          </view>
        </view>
        <view class="t-img">
          <!-- 首页广告1 -->
          <view class="i" v-if="Ads && Ads[0].ads[0]">
            <!-- <swiper style="width: 100%;height: 100%;" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item style="width: 100%;height: 100%;" v-for="(item,i) in Ads[1].ads" :key="item.id">
								<view class="swiper-item" style="width: 100%;height: 100%;">
									<image style="width: 100%;height: 100%;" :src="$img_base_url(item.thumb_image)" mode="aspectFill"></image>
								</view>
							</swiper-item>
						</swiper> -->
            <image
              style="width: 100%; height: 100%"
              :src="$img_base_url(Ads ? Ads[0].ads[0].thumb_image : '')"
              @click="toList(Ads ? Ads[0].ads[0] : '')"
              mode="aspectFill"
            ></image>
          </view>
          <!-- 首页广告2 -->
          <view class="i" v-if="Ads && Ads[0].ads[1]">
            <!-- <swiper style="width: 100%;height: 100%;" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item style="width: 100%;height: 100%;" v-for="(item,i) in Ads[2].ads" :key="item.id">
								<view class="swiper-item" style="width: 100%;height: 100%;">
									<image style="width: 100%;height: 100%;" :src="$img_base_url(item.thumb_image)" mode="aspectFill"></image>
								</view>
							</swiper-item>
						</swiper> -->
            <image
              style="width: 100%; height: 100%"
              :src="$img_base_url(Ads[0].ads[1].thumb_image)"
              @click="toList(Ads[0].ads[1])"
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>
      <!-- 拼团 -->
      <view class="groupBuy box-3">
        <view class="title">
          <view class="left">
            <text>特惠拼团</text>
          </view>
          <view class="right" @click="toUrl('/pagesMall/group_buying/group_buying')">
            <text>查看全部</text>
            <image :src="$img_path('/course/index/icon_r.png')" mode="widthFix"></image>
          </view>
        </view>
        <view class="scroll-box">
          <scroll-view class="list-scroll" scroll-x="true">
            <view class="item" v-for="(item, i) in groups" :key="item.id" @click="toGroups(item, i)">
              <view class="img-box">
                <image :src="$img_base_url(item.image)" mode="aspectFill"></image>
                <view class="text">
                  <image :src="$img_path('/mall/1.png')" mode="scaleToFill"></image>
                  <text>{{ item.people_num }}人团</text>
                </view>
              </view>
              <view class="price"> <text>￥</text>{{ item.price }} </view>
              <view class="num"> 已拼{{ item.groups_num }}件 </view>
            </view>
          </scroll-view>
        </view>
      </view>

      <view class="swiper_1 swiper-box" v-if="Ads && Ads[1].ads.length > 0">
        <swiper :autoplay="true" :interval="3000" :duration="1000">
          <swiper-item>
            <view class="swiper-item" v-for="(item, i) in Ads[1].ads" :key="item.id">
              <image :src="$img_base_url(item.thumb_image)" @click="toList(item)" mode="aspectFill"></image>
            </view>
          </swiper-item>
        </swiper>
      </view>

      <view class="bg-box box-3 img-nav" v-if="Ads && Ads[2].ads.length > 0">
        <view class="title">
          <view class="left">
            <text>{{ Ads ? Ads[2].name : "" }}</text>
          </view>
          <view class="right">
            <text></text>
          </view>
        </view>
        <view class="img-box">
          <!-- <image :src="$img_path('/mall/n_1.png')" mode="aspectFill"></image> -->
          <view class="s-img">
            <swiper style="width: 100%; height: 100%" :autoplay="true" :interval="3000" :duration="1000">
              <swiper-item
                style="width: 100%; height: 100%"
                v-for="(item, i) in Ads[2].ads.slice(0, Ads[2].ads.length - 2)"
                :key="item.id"
              >
                <view class="swiper-item" style="width: 100%; height: 100%">
                  <image
                    style="width: 100%; height: 100%"
                    :src="$img_base_url(item.thumb_image)"
                    @click="toList(item)"
                    mode="aspectFill"
                  ></image>
                </view>
              </swiper-item>
            </swiper>
          </view>
          <view class="c-img">
            <image
              :src="$img_base_url(Ads ? Ads[2].ads[Ads[2].ads.length - 2].thumb_image : '')"
              @click="toList(Ads[2].ads[Ads[2].ads.length - 2])"
              mode="aspectFill"
            ></image>
            <image
              :src="$img_base_url(Ads ? Ads[2].ads[Ads[2].ads.length - 1].thumb_image : '')"
              @click="toList(Ads[2].ads[Ads[2].ads.length - 1])"
              mode="aspectFill"
            ></image>
          </view>
        </view>
      </view>

      <!-- 模块1 -->
      <view class="list-box row-list bg-box">
        <view class="title">
          {{ moduleInfo && moduleInfo[0] ? moduleInfo[0].name : "" }}
        </view>
        <view
          class="item"
          v-for="(item, i) in moduleInfo ? moduleInfo[0].goods.slice(0, 3) : []"
          :key="item.id"
        >
          <goodsBox
            :goodsDetail="item"
            :styleType="2"
            :title_row="1"
            :imageStyle="{ width: '260rpx', height: '260rpx' }"
            :pageUrl="'/pagesMall/goods/detail?id=' + item.id"
          >
            <text slot="center" style="margin-top: 16rpx; display: block">销量：{{ item.sales }}</text>
            <view slot="tagList" class="tagList">
              <view class="tag-item" v-for="(t_i, idx) in item.labels.split(',')" :key="idx">
                {{ t_i }}
              </view>
            </view>
          </goodsBox>
        </view>
      </view>

      <!-- 模块2 -->
      <view class="list-box colunm-list bg-box" style="background-color: transparent">
        <view class="title">
          {{ moduleInfo && moduleInfo[1] ? moduleInfo[1].name : "" }}
        </view>
        <view class="list">
          <view
            class="item"
            :goodsDetail="item"
            v-for="(item, i) in moduleInfo ? moduleInfo[1].goods.slice(0, 6) : []"
            :key="item.id"
          >
            <goodsBox
              :goodsDetail="item"
              :styleType="1"
              :title_row="1"
              :imageStyle="{ width: '344rpx', height: '344rpx' }"
              :pageUrl="'/pagesMall/goods/detail?id=' + item.id"
            >
              <text slot="center" style="margin-top: 16rpx; display: block">销量：{{ item.sales }}</text>
              <view slot="tagList" class="tagList">
                <view class="tag-item" v-for="(t_i, idx) in item.labels.split(',')" :key="idx">
                  {{ t_i }}
                </view>
              </view>
            </goodsBox>
          </view>
        </view>
      </view>

      <!-- 模块3 -->
      <view class="list-box colunm-list bg-box" style="background-color: transparent">
        <view class="title">
          <!-- {{moduleInfo[2].name}} -->
          为你推荐
        </view>
        <view class="list">
          <view
            class="item"
            v-for="(item, i) in moduleInfo ? moduleInfo[2].goods.slice(0, 8) : []"
            :key="item.id"
          >
            <goodsBox
              :goodsDetail="item"
              :styleType="1"
              :title_row="1"
              :imageStyle="{ width: '344rpx', height: '344rpx' }"
              :pageUrl="'/pagesMall/goods/detail?id=' + item.id"
            >
              <text slot="center" style="margin-top: 16rpx; display: block">销量：{{ item.sales }}</text>
              <view slot="tagList" class="tagList">
                <view class="tag-item" v-for="(t_i, idx) in item.labels.split(',')" :key="idx">
                  {{ t_i }}
                </view>
              </view>
            </goodsBox>
          </view>
        </view>
      </view>

      <view class="bottom-img">
        <image :src="$img_path('/course/index/bg.png')" mode="aspectFill"></image>
      </view>
    </view>

    <view class="scroll-top" v-if="s_top" @click="toTop">
      <image :src="$img_path('/course/top.png')" mode="widthFix"></image>
    </view>
    <Tarbar index="1" page="3"></Tarbar>
    <view class="box-fixed" @click="toService">
      <uni-icons color="#ffffff" type="contact" size="30"></uni-icons>
      <text>客服</text>
    </view>
  </view>
</template>

<script>
import { getNav, getAds, indexModule } from "@/utils/api/public.js";
import { listsNew, getCouponList } from "@/utils/api/mallApi.js";
import goodsBox from "@/components/service-box/mall-item-box.vue";
import headerSearch from "@/components/header-search/header-search.vue";
export default {
	name:"mallIndex",
  components: {
    headerSearch,
    goodsBox,
  },
  data() {
    return {
      city: {},
      s_top: false,
      img_base_url: this.img_base_url,
      nav_8: [],
      nav_10: [],
      moduleInfo: null,
      Ads: null,

      groups: [],
      CouponList: [],
    };
  },
  onLoad() {
	  console.log('-------------2')
  },
  mounted() {
	console.log('-------------1')
    this.getNavApi();
    this.getindexModule();
    this.getindexGroups();
    this.getAdsApi();
  },
  onShow() {
    this.city = JSON.parse(uni.getStorageSync("select_city"));
    this.getCoupon();
  },
  methods: {
    // 优惠券列表
    async getCoupon() {
      let res = await getCouponList();
      console.log(res);
      this.CouponList = res.data.data.splice(0, 4);
    },

    // 获取导航
    async getNavApi() {
      let nav_8 = await getNav({ group: 1, type: 2 });
      this.nav_8 = nav_8.data;
      let nav_10 = await getNav({ group: 2, type: 2 });
      this.nav_10 = nav_10.data;
    },

    // 获取广告
    async getAdsApi() {
      let adList = await getAds({ type: 2 });
      this.Ads = adList.data;
    },

    // 获取首页模块配置
    async getindexModule() {
      let module = await indexModule({ type: 2 });
      // console.log(module,'-')
      this.moduleInfo = module.data;
    },

    // 拼团
    getindexGroups() {
      listsNew({ type: "groups" }).then((res) => {
        this.groups = res.data.data;
      });
    },

    toModel(url, i) {
      uni.setStorageSync("tarbarModule", i);
      uni.reLaunch({
        url: url,
      });
    },
    toUrl(url) {
      uni.navigateTo({
        url: url,
      });
    },

    toList(item) {
      if (item.url_type == 1) {
        uni.navigateTo({
          url: `/pagesMall/webView/webView?url=${item.url}`,
        });
      } else {
        uni.navigateTo({
          url: item.url,
        });
      }
    },
    toTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 100,
      });
    },

    // 拼团详情
    toGroups(data, i) {
      uni.navigateTo({
        url: `/pagesMall/group_buying/detail?id=${data.id}`,
      });
    },

    searchClick() {
      uni.navigateTo({
        url: "/pagesMall/search/search",
      });
    },
    citySelect() {
      uni.navigateTo({
        url: "/pagesMine/city_select/city_select",
      });
    },
    toService() {
      uni.navigateTo({
        url: "/pagesMine/helpAndCustomerService/helpAndCustomerService",
      });
    },
  },
  onPageScroll(event) {
    if (event.scrollTop > 100) {
      this.s_top = true;
    } else {
      this.s_top = false;
    }
  },
};
</script>

<style lang="scss" scoped>
@import "index.scss";

.box-fixed {
  position: fixed;
  right: 10rpx;
  bottom: 200rpx;
  border: 1px solid red;
  align-items: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 120rpx;
  height: 120rpx;
  background: #e72a2a;
  color: #fff;
}
</style>
